import { Card, Tooltip } from 'antd';
import { dealBigMoney } from '@/utils/index';

const DataCard = () => {
  const dataList = [
    { title: '今日成交', tradingVolume: 987, turnover: 8797.5 },
    { title: '昨日成交', tradingVolume: 568, turnover: 6542.0 },
    { title: '近7日成交', tradingVolume: 8795, turnover: 456789.05 },
    { title: '近一月成交', tradingVolume: 57578, turnover: 2456789.06 },
  ];
  const bgColors = ['before:bg-primary-color', 'before:bg-[tomato]', 'before:bg-[green]', 'before:bg-[#8b2671]'];
  // 获取小数点后数字
  const priceSubstring = (str: string) => {
    return str.substring(str.indexOf('.'));
  };
  // 处理成交额
  const turnoverHandler = (turnover: number) => {
    return {
      integer: turnover.toFixed(0), // 整数部分
      decimal: priceSubstring(turnover.toFixed(2)), // 小数部分
    };
  };
  return (
    <div className="flex justify-between">
      {dataList.map((item, index) => (
        <Card className="flex-1 mr-24 last:mr-0" key={index}>
          <div
            className={`text-18 font-bold flex items-center before:w-10 before:h-10 before:rounded-5 before:mr-4 ${bgColors[index]}`}
          >
            {item.title}
          </div>
          <div className="flex mt-12 text-16">
            <div className="flex-1">
              <div className="text-color-paragraph">成交量</div>
              <span className="font-bold">{item.tradingVolume}</span>
            </div>
            <div className="flex-1">
              <div className="text-color-paragraph">成交额</div>
              {/* 分割整数部分和小数部分 显示不同大小 */}
              <Tooltip title={dealBigMoney(item.turnover, '成交额：')}>
                <span
                  data-decimal={turnoverHandler(item.turnover).decimal}
                  className={`flex items-center text-red-500 font-bold after:block after:content-[attr(data-decimal)] after:text-14`}
                >
                  ¥{turnoverHandler(item.turnover).integer}
                </span>
              </Tooltip>
            </div>
          </div>
        </Card>
      ))}
    </div>
  );
};
export default DataCard;
